<template>
	<div class="home">
		<el-container>
			<el-header class="top-box">
				<el-row :gutter="24">
					<el-col :span="18">
						<img src="@/assets/logo.png" class="logo" />
					</el-col>
					<el-col :span="6">
						<div class="info-box">
							<span>课程表</span>
							<el-button type="text" class="out-btn">退出</el-button>
						</div>
					</el-col>
				</el-row>
			</el-header>
			<el-container>
				<el-aside width="200px">
					<el-menu class="el-menu-vertical-demo" :router="true">
						<el-menu-item v-for="(item, index) in tabList" :route="item.path" :key="item.index"
							:index="(index).toString()">
							<template #title>{{ item.meta.title }}</template>
						</el-menu-item>
					</el-menu>
				</el-aside>
				<el-main>
					<!-- 路由渲染标签 -->
					<div class="content-box">
						<router-view></router-view>
					</div>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
import { getData } from "@/http/api.js";
import router from "@/router/index.js";
export default {
	name: "Home",
	setup() {
		getData
			.then((res) => {
				// console.log(res)
			})
			.catch((err) => {
				console.log(err);
			});
		// console.log(router)
		// let tabList = router.options.routes.filter(v=>v.meta.isShow)
		let tabList = router.options.routes[0].children;
		// console.log(tabList)
		return {
			tabList,
		};
	},
	components: {},
};
</script>

<style lang="scss" scoped>
.top-box {
	background: #efefef;
	padding: 5px;
}

.logo {
	width: 50px;
	height: 50px;
}

.info-box {
	text-align: right;
}

.out-btn {
	margin-left: 10px;
}
.content-box{
	padding: 20px;
}
</style>
